<!-- 新用户数统计 -->
<template>
  <div id="NewCustomers">
    <div id="NewCustomersEcharts" :style="{height:height,width:width}" />
    <div class="target_box" :style="{width:width}">
      <i class="el-icon-top" />25.16%
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewCustomers',
  data() {
    return {
      height: '60px',
      width: '120px',
      chart: null
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.initChart() // 构建统计图
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 构建统计图
    initChart() {
      this.chart = this.$echarts.init(document.getElementById('NewCustomersEcharts'))
      const data = [25, 66, 41, 85, 63, 44, 12, 50]
      const xAxisData = [1, 2, 3, 4, 5, 6, 7, 8]
      const yAxisData = []
      const yAxisMax = Math.max(...data) + 50
      const yAxisSplitNumber = data.length
      this.chart.setOption({
        color: ['#5fdaac'],
        xAxis: {
          data: xAxisData,
          show: false
        },
        yAxis: {
          data: yAxisData,
          show: false,
          type: 'value',
          min: 0,
          max: yAxisMax,
          splitNumber: yAxisSplitNumber
        },
        series: [
          {
            data: data,
            type: 'line',
            symbol: 'none',
            smooth: 0.6,
            areaStyle: {
              color: '#5fdaac'
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.target_box{
  text-align: center;
  margin-top: 10px;
  color:#5fdaac;
  font-weight: bold;
}
</style>
